<style lang="less" scoped>
#form:first-child {
  padding-right: 20px;
}
</style>

<template>
  <Form ref="formItem" :model="formItem" :label-width="100" :rules="ruleValidate">
    <!-- <Row> -->
    <Row>
      <Col span="12">
        <FormItem label="姓名:" prop="name">
          <Input v-model="formItem.name" placeholder="请输入姓名"></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="手机:" type="number" prop="phone">
          <Input v-model="formItem.phone" placeholder="请输入手机号"></Input>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <FormItem label="性别:" prop="sex">
          <RadioGroup v-model="formItem.sex">
            <Radio :label="0">男</Radio>
            <Radio :label="1">女</Radio>
          </RadioGroup>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="邮箱:" prop="email">
          <Input v-model="formItem.email" placeholder="请输入邮箱"></Input>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <FormItem label="生日:" prop="birthday">
          <DatePicker type="date" placeholder="请选择生日" v-model="formItem.birthday"></DatePicker>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="类别:" v-show="!isSuperAdmin" prop="roleId">
          <Select v-model="formItem.roleId" :disabled="formItem.tid" @on-change="roleChange">
            <Option v-for="role in commonRoleList" :value="role.tid">{{role.name}}</Option>
          </Select>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col span="12" v-if="showPassword == true">
        <FormItem label="密码:"  prop="password">
          <Input v-model="formItem.password" type="password" placeholder="请输入密码"></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="专业:" v-show="isShowProfession" prop="professionId">
          <Select v-model="formItem.professionId" filterable>
            <Option v-for="pro in professionList" :value="pro.tid">{{pro.proName}}</Option>
          </Select>
        </FormItem>
      </Col>
    </Row>
    <!-- <Row>

        <Col span="12" v-show="formItem.readOnly">
            <FormItem label="创建日期:">
              <DatePicker type="date" placeholder="请选择创建日期" v-model="formItem.createdAt"></DatePicker>
          </FormItem>
    </col>-->
    <!-- </Row>
    <Row>-->
    <!-- <Col span="12" v-show="formItem.readOnly">
            <FormItem label="修改日期:">
              <DatePicker type="date" placeholder="请选择修改日期" v-model="formItem.updateAt"></DatePicker>
          </FormItem>
        </col>
        <Col span="12" v-show="formItem.readOnly">
            <FormItem label="删除日期:">
              <DatePicker type="date" placeholder="请选择删除日期" v-model="formItem.deletedAt"></DatePicker>
          </FormItem>
    </col>-->
    <!-- </Row> -->
    <!-- <Row>
        <Col>
          <Button @click="btnClick">点击我</Button>
        </Col>
    </Row>-->
    <!-- </Row> -->
  </Form>
</template>

<script>
// import { mapActions,mapState } from 'vuex'
import httpUtil from '@/libs/httpUtil'

export default {
  name: 'UserAddForm',
  props: {
    row: {
      required: true,
      type: Object
    },
    isSuperAdmin: {
      required: false,
      type: Boolean,
      default: false
    },
    showPassword: {
      required: false,
      type: Boolean,
      default: false
    }
  }, // 表单数据
  data () {
    return {
      // 表单数据
      formItem: {
        // sex: 0,
        // phone: null,
        // name: "",
        // birthday: null,
        // roledId: null,
        // professionId: null
      },
      professionList: [],
      commonRoleList: [],
      isShowProfession: false,
      // 定义验证规则
      ruleValidate: {
        /* wasteName: [{
                    // 自定义校验  校验是否wasteName
                    validator: validatewasteName,
                    trigger: 'blur'
                    /*
                    this.$validator.checkPositive
                    required: true,
                    message: this.$i18n.t('out_factory_waste_name') + this.$i18n.t('not_null'),
                    trigger: 'change' { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                }], */
        name: [
          {
            required: true,
            type: 'string',
            min: 2,
            message: '请输入不少于2个的字符串',
            trigger: 'blur'
            // validator: this.vilidataPhone
          }
        ],
        phone: [
          {
            required: true,
            message: '手机号为11位数字',
            trigger: 'blur',
            // min: 11,
            type: 'number',
            validator: this.vilidataPhone
            // transform(value) {
            //   return Number(value);
            // }
          }
        ],
        sex: [
          {
            required: true,
            message: '性别必须选择',
            trigger: 'blur',
            validator: this.validateRoleId
          }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
            validator: this.validatePassword
          },
          {
            type: 'string',
            min: 6,
            message: '密码不能小于6位',
            trigger: 'blur'
          }
        ],
        roleId: [
          {
            required: true,
            // validator: this.$validator.checkPositive,
            message: '角色必须选择',
            trigger: 'blur',
            validator: this.validateRoleId
          }
        ],
        professionId: [
          {
            required: true,
            // validator: this.$validator.checkPositive,
            message: '专业必须选择',
            trigger: 'blur',
            validator: this.vilidatePro
          }
        ]
      }
    }
  },
  computed: {},
  methods: {
    // 验证手机号为11 位数组
    vilidataPhone (rule, value, callback, message) {
      if (!value && rule.required) {
        callback(new Error(message))
      } else if (value) {
        if (value.length !== 11) {
          callback(new Error('手机号必须为11位数字'))
        } // 位数
        if (!isNaN(Number(value)) && Number(value) >= 0) {
          callback()
        } else {
          callback(new Error('手机号必须为11位数字'))
        }
      } else {
        callback()
      }
    },

    // 验证手机号为11 位数组
    vilidatePro (rule, value, callback, message) {
      if (this.formItem.roleId === 2) {
        if (!value && rule.required) {
          callback(new Error(message))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },

    // 自定义校验，角色
    validateRoleId (rule, value, callback, message) {
      // debugger;
      if ((value === null || value === undefined) && rule.required) {
        callback(new Error(message))
      } else if (value) {
        if (!isNaN(Number(value)) && Number(value) >= 0) {
          callback()
        } else {
          callback(new Error(message))
        }
      } else {
        callback()
      }
    },

    // 自定义校验，角色
    validatePassword (rule, value, callback, message) {
      // debugger;
      if (this.showPassword === true) {
        if ((value === null || value === undefined) && rule.required) {
          callback(new Error(message))
        } else {
          callback()
        }
      }
    },

    btnClick () {
      // console.log(this.formItem);
      debugger
    },

    // 表单验证
    preHandleSubmit () {
      this.$refs['formItem'].validate(valid => {
        if (valid) {
          // 验证通过 回调
          // this.$Message.success("验证通过！");
          this.$emit('validate-success')
          // debugger;
        } else {
          // debugger;
          this.$Message.error('表单验证不通过')
        }
      })
    },

    clearField () {
      this.formItem = {}
      this.$refs['formItem'].resetFields()
    },
    handleCancel () {},
    // 用户角色变了
    roleChange (value) {
      // 返回的是value
      console.log(value)
      let roles = this.commonRoleList
      roles.forEach(item => {
        if (item.tid === value) {
          if (item.key === 'student') {
            // 如果选的是学生显示选择专业
            this.isShowProfession = true
          } else {
            this.isShowProfession = false
            delete this.formItem.professionId
          }
        }
      })
    },
    // 获取下拉框数据
    getData () {
      this.$httpUtil.asyncGet('admin/um/user/getSelectData', {}, res => {
        if (res.data.code === 200) {
          this.professionList = res.data.records.professionList
          this.commonRoleList = res.data.records.roleList
        }
      })
    },
    // 初始化页面
    init () {
      this.getData()
    }
  },
  watch: {
    row (v) {
      // debugger;
      this.formItem = v
      this.roleChange(this.formItem.roleId)
    }
  },
  mounted () {
    this.init()
  }
  // watch:{
  //   row(v){
  //     let rowData = JSON.parse(JSON.stringify(v))
  //     this.formItem = rowData
  //   }
  // }
}
</script>
